<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
				</div>
				<div class="flex-end-center-wrap">
					<jk-select v-model="searchParams.workshopId" :option-list="workshopList" :clearable="false" placeholder="区域" class="search-bar-item-size1 margin-5-0 item-gap"></jk-select>
					<jk-search-input v-model="searchParams.productNameOrCode" placeholder="品种编号或名称" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<jk-search-input v-model="searchParams.batchCode" placeholder="批号" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<jk-search-input v-model="searchParams.machineNameOrCode" placeholder="机台编号或名称" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<jk-select v-model="searchParams.openingState" :option-list="openStateList" placeholder="状态" clearable class="search-bar-item-size1 margin-5-0 item-gap"></jk-select>
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>

		<jk-card>
			<jk-table ref="jkTable" :stripe="false" border :loading="tableLoading" :data="tableData" :height="tableHeight + 20">
				<vxe-column
					v-for="(item, index) in tableColumnList"
					:key="index"
					:title="item.title"
					:align="item.align"
					:field="item.keyName"
					:sortable="item.sortable"
					:fixed="item.fixed ? item.fixed : ''"
					:min-width="item.minWidth"
					:width="item.width"
				>
					<template slot-scope="scope">
						<div v-if="item.keyName === 'startSpinNumber'">
							<span>{{ scope.row.startSpinNumber ? `${scope.row.startSpinNumber}~${scope.row.endSpinNumber}` : '' }}</span>
						</div>
						<div v-else-if="item.keyName === 'empList'">
							<span>{{ scope.row.empList ? scope.row.empList.map(x => x.empName).join(',') : '' }}</span>
						</div>
						<jk-state-bar v-else-if="item.keyName === 'openingState'" :state="scope.row.openingState" :state-list="openStateList"></jk-state-bar>
						<span v-else>{{ scope.row[item.keyName] }}</span>
					</template>
				</vxe-column>
				<vxe-column title="操作" align="center" fixed="right" :width="240">
					<template slot-scope="scope">
						<div class="flex-center">
							<jk-button :disabled="scope.row.openingState !== 2" icon="el-icon-video-play" class="item-gap" size="mini" type="success" @click="onOpenBtn(scope.row)">开台</jk-button>
							<jk-button :disabled="scope.row.openingState !== 3" icon="el-icon-video-pause" class="item-gap" size="mini" type="primary" @click="onCloseBtn(scope.row)">了机</jk-button>
							<el-dropdown trigger="click" @command="onDropdownChange($event, scope.row)">
								<el-button type="primary" size="mini" class="el-dropdown-link">
									更多<i class="el-icon-arrow-down el-icon--right"></i>
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item
										v-for="(item) in dropdownOption"
										:key="item.code"
										:command="item.code"
										:disabled="item.allowState || item.allowState === 0 ? scope.row.openingState !== item.allowState : false"
										:style="{display: !item.isShow ? 'none' : 'block'}"
									>
										<span :class="`${item.icon} item-gap`"></span>
										<span>{{ item.name }}</span>
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</template>
				</vxe-column>
			</jk-table>
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="searchParams.count"
					@on-change="onPageChange"
				/>
			</footer>
		</jk-card>
		<detail-dialog
			:data-id="dataId"
			:dialog-state="detailDialogState"
			@on-visible-change="onVisibleChangeOfDetailDialog"
		></detail-dialog>
		<open-dialog
			:select-machine-item="selectMachineItem"
			:dialog-state="openDialogState"
			@on-visible-change="onVisibleChangeOfOpenDialog"
			@on-confirm="onConfirmChangeOfOpenDialog"
		></open-dialog>
		<close-dialog
			:select-machine-item="selectMachineItem"
			:dialog-state="closeDialogState"
			@on-visible-change="onVisibleChangeOfCloseDialog"
			@on-confirm="onConfirmChangeOfCloseDialog"
		></close-dialog>
	</div>
</template>

<script>
    import { auditStateList } from '@/utils/jk/status-option-list';
    import detailDialog from './detail-dialog';
    import calHeight from '/src/mixins/cal-table-height';
    import { pageConfig } from '/src/utils/jk/jk-tool';
    import {
        productionPrdNoticeLtMachineChangeClearClose,
        productionPrdNoticeLtMachineChangeClearOpening,
        productionPrdNoticeLtMachineChangeDelete,
        productionPrdNoticeLtMachineChangePage
    } from '../../../../api/production/ltNotice';
    import getMenuColumn from '../../../../mixins/getMenuColumn';
    import handlerCache from '../../../../mixins/handler-cache';
    import { openStateList } from '../../../../utils/jk/status-option-list';
    import closeDialog from '../ltMachineList/close-dialog';
    import openDialog from '../ltMachineList/open-dialog';

    export default {
        name: 'LtMachineList',
        components: {
            openDialog,
            closeDialog,
            detailDialog
        },
        mixins: [calHeight, getMenuColumn, handlerCache],
        data() {
            return {
                selectMachineItem: {},
                dropdownOption: [
                    { code: 'CANCEL_OPEN', name: '取消开台', isShow: true, icon: 'el-icon-circle-close', allowState: 3, api: productionPrdNoticeLtMachineChangeClearOpening },
                    { code: 'CANCEL_CLOSE', name: '取消了机', isShow: true, icon: 'el-icon-close', allowState: 4, api: productionPrdNoticeLtMachineChangeClearClose }
                ],
                prefix: 'production:prdNoticeLtMachineChange',
                apiItem: {
                    'page': productionPrdNoticeLtMachineChangePage,
                    'delete': productionPrdNoticeLtMachineChangeDelete
                },
                openStateList: openStateList,
                workshopList: [],
                importDialogState: false,
                auditStateList: auditStateList,
                detailDialogState: false,
                dataId: null,
                tableLoading: true,
                exportLoading: false,
                tableData: [],
                searchParams: {
                    count: 0,
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    machineNameOrCode: null,
                    workshopId: null,
                    batchCode: '',
                    productNameOrCode: '',
                    openingState: 4,
                    typeId: null,
                    auditState: null
                },
                rowData: {},
                closeDialogState: false,
                openDialogState: false
            };
        },
        methods: {
            onDropdownChange(type, { id }) {
                const optionItem = this.dropdownOption.find(x => x.code === type);
                if (optionItem) {
                    if (optionItem.code === 'DETAIL') {
                        this.onDetailBtn({ id });
                    } else {
                        this.$confirm(`确定"${optionItem.name}"吗？`, '提示', { type: 'warning' }).then(() => {
                            optionItem.api({ prdNoticeMachineChangeId: id }, { prdNoticeMachineChangeId: id }).then(res => {
                                if (res.data.status === 200) {
                                    this.getListRequest();
                                }
                            });
                        }).catch(() => {});
                    }
                }
            },
            onOpenBtn(row) {
                this.selectMachineItem = row;
                this.openDialogState = true;
            },
            onCloseBtn(row) {
                this.selectMachineItem = row;
                this.closeDialogState = true;
            },
            onVisibleChangeOfCloseDialog(e) {
                this.closeDialogState = e;
            },
            onConfirmChangeOfCloseDialog() {
                this.closeDialogState = false;
                this.getListRequest();
            },
            onDeleteBtn(item) {
                this.$confirm(`确定"删除"吗？`, '提示', { type: 'warning' }).then(() => {
                    productionPrdNoticeLtMachineChangeDelete({
                        id: item.id
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.getListRequest();
                        }
                    });
                }).catch(() => {});
            },
            onConfirmChangeOfOpenDialog() {
                this.openDialogState = false;
                this.getListRequest();
            },
            onVisibleChangeOfOpenDialog(e) {
                this.openDialogState = e;
            },
            onCancelBtn(scope, item) {
                if (item.openingState === 3) {
                    productionPrdNoticeLtMachineChangeClearOpening({
                        prdNoticeMachineChangeId: item.id
                    }, {
                        prdNoticeMachineChangeId: item.id
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.getListRequest();
                        }
                    });
                }
            },
            onOperationBtn(scope, productItem) {
                this.selectMachineItem = {
                    workshopId: scope.row.workshopId,
                    workshopCode: scope.row.workshopCode,
                    workshopName: scope.row.workshopName,
                    machineId: scope.row.machineId,
                    machineCode: scope.row.machineCode,
                    machineName: scope.row.machineName,
                    startSpinNumber: scope.row.startSpinNumber,
                    endSpinNumber: scope.row.endSpinNumber,
                    ...productItem
                };
                if (productItem.openingState === 2) {
                    this.openDialogState = true;
                } else if (productItem.openingState === 3) {
                    this.closeDialogState = true;
                }
            },
            onVisibleChangeOfImportDialog(e) {
                this.importDialogState = e;
            },
            onFinishBtnOfImportDialog() {
                this.importDialogState = false;
                this.getListRequest();
            },
            onPageChange(pageIndex, pageSize) {
                this.searchParams.pageNo = pageIndex;
                this.searchParams.pageSize = pageSize;
                this.getListRequest();
            },
            onDetailBtn(e) {
                this.dataId = e.id;
                this.detailDialogState = true;
            },
            onVisibleChangeOfDetailDialog(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.detailDialogState = e;
            },
            /** 查询列表 */
            getListRequest() {
                this.tableLoading = true;
                this.apiItem.page(this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res;
                        this.searchParams.count = res.data.count;
                    }
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.searchParams.count = 1;
                this.getListRequest();
            },
            clearCacheMethod() {
                // Object.assign(this.$data, this.$options.data());
                this.$nextTick(() => {
                    this.getDependentData();
                });
            },
            async getDependentData() {
                await this.getMenuColumnListRequest();
                await this.getListRequest();
            }
        },
        mounted() {
            this.workshopList = this.$store.state.user.userWorkshop.workshopList;
            this.$set(this.searchParams, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
            this.getDependentData();
        }
    };
</script>
<style scoped lang="scss">
    .operation-product-icon {
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        margin-right: 4px;
    }
    .product-item-label {
        color: #5cadff;
        margin-right: 4px;
    }
    .product-item-value {
        color: #2b85e4;
        font-weight: 500;
    }
    .open-icon {
        color: #19be6b;
    }
    .close-icon {
        color: #ed4014;
    }
</style>
